<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap-theme.min.css"/>

</head>
<body>



<div class="container">
    <form action="#">
        <div class="form-group">
            <label for="name">用户名</label>
            <input type="text" class="form-control" id="name">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password">
        </div>
        <div class="form-group">
                <label for="photo">头像</label>
                <input type="file" class="form-control" id="photo">
        </div>
        <div class="checkbox">
            <label for="married"><input type="checkbox" id="married" name="married"/>婚否</label>
        </div>
    </form>
    <hr/>
    <br/>
    <div class="form-inline">
        <form action="#">
            <div class="form-group">
                <label for="name">用户名</label>
                <input type="text" class="form-control" id="name">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password">
            </div>
            <div class="form-group">
                    <label for="photo">头像</label>
                    <input type="file" class="form-control" id="photo">
            </div>
            <div class="checkbox">
                <label for="married"><input type="checkbox" id="married" name="married"/>婚否</label>
            </div>
    </div>
    <hr/>
    <br/>
    <form action="#" class="form-horizontal">
        <div class="form-group">
            <label for="name" class="col-sm-1 control-label">用户名</label>
            <div class="col-sm-11">
                <input type="text" class="form-control" id="name">
            </div>
            
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-1 control-label">密码</label>
            <div class="col-sm-11">
                <input type="password" class="form-control" id="password">
            </div>
        </div>
        <div class="form-group">
            <label for="photo" class="col-sm-1 control-label">头像</label>
            <div class="col-sm-11">
                <input type="file" class="form-control" id="photo">
            </div>
                
        </div>
        <div class="checkbox col-sm-11">
            <label for="married"><input type="checkbox" id="married" name="married"/>婚否</label>
        </div>
    </form>
    <hr/>
    <br/>
    <form action="#">
        <div class="checkbox">
            <label>
                <input type="checkbox" value="html5"/>前端讲义
            </label>
        </div>
        <div class="checkbox disabled">
            <label>
                <input type="checkbox" value="java" disabled="true"/>Java讲义
            </label>
        </div>
        <div class="radio">
                <label>
                    <input type="radio" value="1" />男
                </label>
            </div>
        <div class="radio">
            <label>
                <input type="radio" value="2" />女
            </label>
        </div>
        <div class="radio disabled">
            <label>
                <input type="radio" value="2" disabled="true" />女
            </label>
        </div>
    </form>
    <hr/>
    <br/>
    <form action="#">
        <label class="radio-inline">
            <input type="radio" value="1" />男
        </label>
        <label class="radio-inline">
            <input type="radio" value="2" />女
        </label>
    </form>
    <hr/>
    <br/>
    <form action="#">
            <label class="checkbox-inline">
                <input type="checkbox" value="1" />Java
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" value="2" />oracle
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" value="3" />C++
            </label>
        </form>
</div>
<script type="text/javascript" src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>